<template>
    <div id="app">
        <div class="box">
            <div>

                <template v-if="$PowerSelect(userPower, currentPagePower)">
                    <el-select v-model="search.roleId" filterable  placeholder="角色筛选">
                        <el-option key="" label="角色筛选" value="">
                        </el-option>
                        <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
                        </el-option>
                    </el-select>
                    &nbsp;&nbsp;
                    <el-input class="l-input" v-model="search.keyWords" placeholder="关键字搜索"></el-input>

                    <el-button type="primary" class="l-margin-l15" v-on:click="getList">查询</el-button>
                </template>



                <el-button v-if="$PowerAdd(userPower, currentPagePower)" type="primary"
                    v-on:click="onAdd">新增账号</el-button>
            </div>
        </div>
        <div class="box">
                <el-table :data="list" border   :height="`calc(100vh - 305px)`" :highlight-current-row="true">

                <el-table-column label="账号" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.accountNo }}
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.tel }}
                    </template>
                </el-table-column>
                <el-table-column label="描述" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="360" fixed="right" align="center">
                    <template slot-scope="scope">
                        <template v-if="$PowerEnable(userPower,currentPagePower)">
                            <template v-if="scope.row.isSysTem != 1">
                                <el-button type="primary" size="mini" plain v-if="scope.row.enableState == 1"
                                    v-on:click="onEnable(scope.row)">启用
                                </el-button>
                                <el-button type="info" size="mini" plain v-else v-on:click="onEnable(scope.row)">禁用
                                </el-button>
                            </template>

                        </template>

                        <template v-if="$PowerUpdate(userPower, currentPagePower)">
                            <el-button type="primary" size="mini" plain v-on:click="onEdit(scope.row)">编辑</el-button>
                        </template>

                        <template v-if="$PowerDelete(userPower, currentPagePower)">
                            <template v-if="scope.row.isSysTem != 1">
                                <el-button type="danger" size="mini" plain v-on:click="onDelete(scope.row)">删除
                                </el-button>
                            </template>
                        </template>

                        <template v-if="$PowerAction(userPower, currentPagePower)">
                            <el-button type="danger" size="mini" plain v-on:click="onResetPwd(scope.row)">重置密码
                            </el-button>
                        </template>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="height: 10px">&nbsp;</div>
        <div class="box">
            <el-pagination v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                v-bind:current-page="currentPage" v-bind:page-sizes="[10, 20, 30, 40]" v-bind:page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" v-if="reflushPageFlag" v-bind:total="total">
            </el-pagination>
        </div>
        <!--对话框-->
        <el-dialog :title="EditTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%" custom-class="l-dialog">
            <div class="l-div-400">

                <el-form ref="form" :model="form" label-width="130px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item v-if="isAdd" label="账号">
                                <el-input v-model="form.accountNo" class="l-input-form" placeholder="账号,注册后不可更改">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="form.name" class="l-input-form" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input v-model="form.tel" class="l-input-form" placeholder="手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="是否超级管理员">
                                <el-radio-group v-model="form.isSysTem">
                                    <el-radio-button label="1">是</el-radio-button>
                                    <el-radio-button label="0">否</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                           
                            <el-form-item label="描述">
                                <el-input v-model="form.remark" class="l-input-form" placeholder="描述">
                                </el-input>
                            </el-form-item>
                           
                        </el-col>

                    </el-row>


                </el-form>
                <div class="l-roleLisst" v-if="form.isSysTem != 1">
                    <el-table ref="multipleTable" :data="roleList"
                        :header-cell-style="{ backgroundColor: '#409eff', color: 'white' }" border tooltip-effect="dark"
                        style="width: 100%;" v-on:selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>

                        <el-table-column prop="roleName" label="角色名称">
                        </el-table-column>
                        <el-table-column prop="remark" label="角色描述">
                        </el-table-column>
                    </el-table>
                </div>



            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import { GetAccountList,GetRoleListAll,DeleteAccount,ResetPassword,SaveAccount,EnableAccount,GetRoleListByUser } from '@/service/systemapi';
export default {
    data() {
        return {
            userPower: '',
            search: {
                keyWords: "",
                roleId: ""
            },
            currentPagePower: "",
            roleList: [],
            accountRoleList: [],
            //分页 开始
            currentPage: 1,
            pagesize: 10,
            total: 0,
            reflushPageFlag: true,
            //分页 结束
            isAdd: true,
            list: [],
            dialogVisible: false,
            EditTitle: "",
            form: {
                id: "",
                name: "",
                accountNo: "",
                tel: "",
                remark: "",
                isSysTem:"0"
            },
        };
    },
    created() {
        this.currentPagePower=this.$route.query.powercode;
        this.userPower = localStorage.getItem("userPower");
        this.InitData();
    },
    watch: {},
    methods: {

        //初始化
        InitData() {
            if (this.$PowerSelect(this.userPower, this.currentPagePower)) {
                this.getRoleList();
                this.getList();
            }

        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;

            let jsondata = {
                PageIndex: this.currentPage,
                PageSize: this.pagesize,
                keyWords: this.search.keyWords,
                roleId: this.search.roleId
            };
            GetAccountList(jsondata).then(res => {

                if (res.data != undefined) {
                    that.list = res.data.list;
                    that.total = res.data.total;

                    that.$nextTick(function () {
                        that.reflushPageFlag = true;
                    });
                }
                that.closeLoading();
            }).catch(err => {
                this.$message.error("数据请求异常");
                that.closeLoading();
            })

        },
        //角色列表
        getRoleList() {

            this.roleList = [];
            var that = this;

            GetRoleListAll().then(res => {

                if (res.data != undefined) {
                    that.roleList = res.data;
                }
            }).catch(err => {
                //this.$message.error("数据请求异常");
            })

        },

        //初始化表单
        initForm() {
            this.form.id = "";
            this.form.name = "";
            this.form.remark = "";
            this.form.tel = "";
            this.form.accountNo = "";
            
            this.form.isSysTem = "0";
        },
        onAdd() {
            this.initForm();

            this.isAdd = true;
            this.dialogVisible = true;
            this.EditTitle = "新增";
            this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
            })
            this.accountRoleList = [];
        },
        onEdit(row) {
            this.initForm();
            this.isAdd = false;
            this.dialogVisible = true;
            this.EditTitle = "修改";

            //赋值
            this.form.id = row.id;
            this.form.name = row.name;
            this.form.remark = row.remark;
            this.form.tel = row.tel;
            this.form.accountNo = row.accountNo;
            this.form.isSysTem = row.isSysTem.toString();
            this.getAccountRoles(row.id);
        },
        onDelete(row) {
            var that = this;
            this.$confirm("是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                that.openLoading();
                DeleteAccount(row.id ).then(res => {
                    that.closeLoading();
                    console.log(res);
                    if (res.success) {
                        that.getList();
                        that.$message({ message: "删除成功", type: "success" });
                    } else {
                        that.$message.error(res.msg);
                    }
                }).catch(err => {
                    that.$message.error("删除失败");
                    that.closeLoading();
                })

            });
        },
        onResetPwd(row) {
            var that = this;
            this.$confirm("是否重置密码?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                that.openLoading();
                ResetPassword(row.id).then(res => {
                    that.closeLoading();
                    console.log(res);
                    if (res.success) {
                        that.getList();
                        that.$message({ message: res.data, type: "success" });
                    } else {
                        that.$message.error(res.msg);
                    }
                }).catch(err => {
                    that.$message.error("删除失败");
                    that.closeLoading();
                })

            });
        },

        onSave() {
            var that = this;
            that.openLoading();

            SaveAccount( {
                    Account: this.form,
                    AccountRoleList: this.accountRoleList
                }).then(res => {
                console.log(res);
                that.closeLoading();
                if (res.success) {
                    that.$message({ message: res.data, type: "success" });
                    that.getList();
                    that.dialogVisible = false;
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("操作失败");
                that.closeLoading();
            })

        },
        onEnable(row) {
            var that = this;
            that.openLoading();
            EnableAccount(row.id).then(res => {
                console.log(res);
                that.closeLoading();
                if (res.success) {
                    that.$message({ message: "操作成功", type: "success" });
                    that.getList();
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("操作失败");
                that.closeLoading();
            })

        },
        handleSelectionChange(val) {
            // console.log(this.accountRoleList)
            console.log(val, '勾选')
            this.accountRoleList = val;
            console.log(this.accountRoleList, 'this.accountRoleList')
        },
        //获取角色权限
        getAccountRoles(userid) {
            this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
            })
            this.accountRoleList = [];
            var that = this;

            GetRoleListByUser(userid).then(res => {
                console.log(res, 'res')
                // debugger
                if (res.data != undefined) {
                    that.accountRoleList = res.data;


                    if (that.accountRoleList != undefined && that.accountRoleList.length > 0) {
                        that.roleList.forEach(item => {
                            let temppA = that.accountRoleList.filter(item2 => { return item2.id == item.id; });
                            if (temppA != undefined && temppA.length > 0) {
                                that.$nextTick(() => {
                                    that.$refs.multipleTable.toggleRowSelection(item);
                                })

                            }
                        });

                    }


                }
            }).catch(err => {

            })

        },
        //当前条
        handleSizeChange(val) {
            this.pagesize = val;
            this.getList();
        },
        //当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },
        
    },
};
</script>

<style scoped>


.l-roleLisst {
    padding: 0px 30px;
}



.l-input {
    display: inline-block;
    width: 260px;
}

.l-input-form {
    display: inline-block;
    width: 220px;
}

.l-margin-l15 {
    margin-left: 15px;
}

.l-red {
    color: red;
}
</style>